<template>

  <!-- <div class="user_list" @click.capture="$emit('clickitem',$event.currentTarget)"></div> -->

    <div style="user-select: none;">
       <div   v-for=" (item,index) in show_chatlist" :key="index" 
            @click="change_user(item)"
            :class="{
                'user_list': true, // 总是添加这个类
                'user_list_hover': current_chat?.room_id== item?.room_info?.room_id // 根据条件添加这个类
                }">
                      <ITEM   :info="item"/>
        </div> 
        <i  v-if="show_chatlist.length==0" class="show_nomore"></i>
    </div>
</template>

<script setup>
import { onMounted, ref, defineModel, inject, onBeforeMount, registerRuntimeCompiler, computed, watch } from 'vue';
import ITEM from "./item.vue"
const chat = inject('chat')()

let current_chat = defineModel('current_chat', {
    type: Object,
    required: true
})

let show_chatlist=defineModel('current_chatlist', {
    type: Array,
    required: true
})
const room_stream=inject('room_stream')

onBeforeMount(() => { 
    
})
onMounted(() => {
    // 实际应该在这里获取一下，历史消息
    
})
const change_user = async (e) => {
    // 新增未读字段,在room_stream里

    // console.log(e)
    // 改变当前的信息,这只是一个标记用于背景效果
    if (Object.keys(e).length <= 0) return
    current_chat.value = {room_id:e.room_info.room_id,type:e.room_info.type}
    // 实际处理逻辑,用仓库的全信息
    // console.log(chat.value.get_room_unread_lastmessage_byroom_id(e.room_info.room_id))
    const last_stream_info = await room_stream.getData(e.room_info.room_id) || 0
    room_stream.putData({
        room_id: e.room_info.room_id,
        stream_time: last_stream_info.stream_time,
        unread: 0,
        last_message:last_stream_info?.last_message
    })
    
    chat.value.set_current_chat({
        room_id: e.room_info.room_id,
        type: e.room_info.type,
        // 如果不是好友就存储群聊信息里的,群头像
        otherinfo: {
            head_image: e?.friend_info?.head_image || e?.room_info?.head_image,
        }
        
    })
}

</script>

<style  scoped>
.user_list{
    display: flex;
    height: 50px;
    width: 100%;
    font-size:16px;
    margin: 3px 1px 3px 1px;
    padding: 2px;
    vertical-align: middle;
    border-radius: 5px;
    background-color: #f8f8f9;
    box-shadow: inset 0 0 2px 0px white;
    overflow: hidden;
    flex-direction: row;
    position: relative;
}

.user_list:hover{
    background-color: #e8eaec;
    transition: background-color 0.3s ease-in-out;
}
.user_list_hover{
    background-color: #e8eaec;
    transition: background-color 0.3s ease-in-out;
}

.user_header_image{
    margin-left: -2px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 5px 5px 5px 5px;
    vertical-align: middle
}
#show_nomore{
    display: block;
    height: 1px;
    background: #ddd;
    margin: 10px 30px;
}

</style>